<template>
  <div class="index">
    <Location class="index-location" type="industry"></Location>
    <div class="index-details">
      <div class="index-article">
        <div class="index-article-title">
          {{ list.detailData.title }}
        </div>
        <div class="index-article-time">
          发布时间：{{ list.detailData.time }}
        </div>
        <div class="index-article-rich" v-html="list.detailData.content"></div>
        <div class="index-article-guide">
          <div
            class="index-article-guide-up"
            @click="jump.handleJump(list.detailData.last)"
          >
            上一条：{{
              list.detailData.last ? list.detailData.last.title : "暂无资讯"
            }}
          </div>
          <div
            class="index-article-guide-down"
            @click="jump.handleJump(list.detailData.next)"
          >
            下一条：{{
              list.detailData.next ? list.detailData.next.title : "暂无资讯"
            }}
          </div>
        </div>
      </div>
      <div class="index-about">
        <div class="index-about-title">相关资讯</div>
        <div class="index-about-list">
          <div
            v-for="item in list.industryList"
            :key="item.id"
            class="index-about-list-item"
            @click="jump.handleJump(item)"
          >
            <div class="index-about-list-item-point"></div>
            <div class="index-about-list-item-title">{{ item.title }}</div>
            <div class="index-about-list-item-time">{{ item.time }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ToastBottom, setObj, getObj } from "@/utils/index";
import { ElMessage } from "element-plus";

import {
  onMounted,
  computed,
  ref,
  reactive,
  toRefs,
  inject,
  defineProps,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import Location from "@/components/location/index";
//获取路由
const $_route = useRoute();
const $_router = useRouter();
// 获取props
const props = defineProps({
  id: [String, Number],
});
onMounted(() => {
  console.log(props.id, "props.id");
  api.getIndustryDetail(props.id);
  api.getIndustryList();
});
//获取接口
const $_api = inject("$api");
const api = reactive({
  getIndustryDetail: async id => {
    const results = await $_api.zixunInfo({ id });
    if (results && results.status > 0) {
      console.log(results.data, "getIndustryDetail");
      list.detailData = results.data;
    }
  },
  getIndustryList: async () => {
    const results = await $_api.zixunList({
      page: 1,
      page_size: 8,
    });
    if (results && results.status > 0) {
      console.log(results.data, "zixunList");
      list.industryList = results.data;
    }
  },
});
const list = reactive({
  //资讯详情
  detailData: {},
  //相关资讯
  industryList: [],
  infoList: [
    {
      id: 1,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: true,
      time: "2021-09-09",
    },
    {
      id: 2,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: true,
      time: "2021-09-09",
    },
    {
      id: 3,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: false,
      time: "2021-09-09",
    },
    {
      id: 4,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: false,
      time: "2021-09-09",
    },
    {
      id: 5,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: false,
      time: "2021-09-09",
    },
    {
      id: 6,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: false,
      time: "2021-09-09",
    },
    {
      id: 7,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: false,
      time: "2021-09-09",
    },
    {
      id: 8,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: false,
      time: "2021-09-09",
    },
    {
      id: 9,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: false,
      time: "2021-09-09",
    },
    {
      id: 10,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: false,
      time: "2021-09-09",
    },
    {
      id: 11,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: true,
      time: "2021-09-09",
    },
    {
      id: 12,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: false,
      time: "2021-09-09",
    },
    {
      id: 13,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: false,
      time: "2021-09-09",
    },
    {
      id: 14,
      title: "浅谈保健品会议营销的发展历程",
      isOfficial: false,
      time: "2021-09-09",
    },
  ],
});
const jump = reactive({
  handleJump: next => {
    if (!next) {
      ElMessage.error("暂无资讯");
      return;
    }
    $_router.push({
      path: `/industryDetail/${next.id}`,
    });
    api.getIndustryDetail(next.id);
  },
});
</script>

<style lang="scss" scoped>
.index {
  @include flex(flex-start, center);
  flex-direction: column;
  margin: 5px auto 0;
  width: 1200px;
}
.index-location {
  flex-shrink: 0;
  width: 100%;
  height: 105px;
}
.index-details {
  @include flex(flex-start, center);
  flex-direction: column;
  margin-top: 13px;
  margin-bottom: 20px;
  width: 100%;
}
.index-article {
  @include flex(flex-start, center);
  flex-direction: column;
  width: 100%;
  border-bottom: 1px solid #e1e1e1;
}
.index-article-title {
  margin-bottom: 8px;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2f2f2f;
  line-height: 28px;
}
.index-article-time {
  margin-bottom: 13px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #6d6d6d;
  line-height: 22px;
}
.index-article-rich {
  margin-bottom: 30px;
}
.index-article-guide {
  @include flex(flex-start, flex-start);
  flex-direction: column;
  margin-bottom: 20px;
  width: 100%;
}
.index-article-guide-up {
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2f2f2f;
  line-height: 32px;
  cursor: pointer;
}
.index-article-guide-down {
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #f9a641;
  line-height: 32px;
  cursor: pointer;
}
.index-about {
  @include flex(flex-start, flex-start);
  flex-direction: column;
  padding-top: 20px;
  box-sizing: border-box;
  width: 100%;
}
.index-about-title {
  margin-bottom: 10px;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2f2f2f;
  line-height: 28px;
}
.index-about-list {
  @include flex(flex-start, flex-start);
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 320px;
}
.index-about-list-item {
  @include flex(flex-start, center);
  width: 50%;
  cursor: pointer;
}
.index-about-list-item:nth-child(-n + 10) {
  margin-right: 10px;
}
.index-about-list-item:nth-child(n + 11) {
  margin-left: 10px;
}
.index-about-list-item-point {
  flex-shrink: 0;
  margin-right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000;
}
.index-about-list-item-title {
  flex-grow: 1;
  text-align: left;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  line-height: 32px;
}
</style>
